let React = {
    // 我可以组成一个对象 这个对象可以描述dom元素
    createElement(type, props, ...children) {
        console.log(arguments)
        // 虚拟dom
        return {type, props, children}
    }
}

// 将虚拟dom转成真实dom
let render = (obj, container) => {
    if (typeof obj === 'string') return container.appendChild(document.createTextNode(obj));
    let {type, props, children} = obj;
    let ele = document.createElement(type);
    for (let key in props) {
        ele.setAttribute(key, props[key])
    }
    // 递归渲染子节点
    children.forEach(child => {
        render(child, ele)
    });
    container.appendChild(ele)
}

// babel把jsx语法进行转化
let ele = <h1 a={1} ><strong>saber</strong> is to strong</h1>

render(ele, document.getElementById('root'))

// 1) react会把jsx语法渲染成 React.createElement()
// 2) React.createElement() -> vnode
// 3) vnode-> 页面上